<template>
	<view class="bookkeeping">
		<!-- 导航栏切换 -->
		<view class="header"><u-tabs :list="list" :is-scroll="false" :current="tabCur" @change="tabSelect"></u-tabs></view>

		<view class="content">
			<u-cell-item @click="openType" icon="list-dot" title="类型" :value="type"></u-cell-item>
			<u-cell-item @click="keyBoardShow = true" icon="rmb-circle" title="金额" :value="'¥' + (money ? money : '0.00')" :arrow="false"></u-cell-item>

			<u-cell-group>
				<u-cell-item title="日期" :arrow="false">
					<picker slot="right-icon" mode="date" :value="date" @change="dateChange">
						<view class="picker">{{ date }}</view>
					</picker>
				</u-cell-item>
			</u-cell-group>

			<u-form-item style="padding: 20rpx 30rpx;" label="备注"><u-input type="textarea" maxlength="1000" placeholder="选填" v-model="remarks" /></u-form-item>
		</view>

		<view class="botBtn"><u-button shape="circle" type="primary" @click="confirm">记一笔</u-button></view>

		<u-keyboard :tooltip="false" mode="number" v-model="keyBoardShow" @change="valChange" @backspace="backspace"></u-keyboard>

		<u-select value-name="text" label-name="text" v-model="incomeTypeShow" mode="single-column" :list="incomeList" @confirm="confirmType"></u-select>
		<u-select value-name="text" label-name="text" v-model="typeShow" mode="single-column" :list="expenditureListList" @confirm="confirmType"></u-select>
	</view>
</template>

<script>
import { classify_get, money_add } from '@/api/api.js';

export default {
	onLoad(option) {
		this.date = this.$utils.dateFormat('YYYY-mm-dd', new Date());
	},
	data() {
		return {
			keyBoardShow: false,
			list: [
				{
					name: '支出'
				},
				{
					name: '收入'
				}
			],
			remarks: '',
			date: '',
			type: '',
			money: '',
			tabCur: 0,
			incomeTypeShow: false,
			typeShow: false,
			incomeList: [{ text: '工资' }, { text: '其他' }],
			expenditureListList: [
				{ text: '早餐' },
				{ text: '午餐' },
				{ text: '晚餐' },
				{ text: '夜宵' },
				{ text: '超市' },
				{ text: '其他' },
				{ text: '房租' },
				{ text: '电费' },
				{ text: '淘宝' },
				{ text: '游戏' },
				{ text: '医院' }
			]
		};
	},
	methods: {
		confirm() {
			let money = new Number(this.money);
			if (money <= 0) {
				this.$utils.showToast('请输入大于0的金额！');
				return;
			}

			let type = this.type;
			if (!type) {
				this.$utils.showToast('请选择金额类型！');
				return;
			}

			let mark = this.tabCur == 1 ? 'income' : 'expenditure';
			let date = this.$utils.dateFormat(this.date + ' HH:MM', new Date());

			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			money_add({
				money,
				type,
				mark,
				date,
				remarks: this.remarks
			}).then(res => {
				uni.hideLoading();
				this.$utils.showToast('记录成功');
				this.resetData();
			});
		},
		tabSelect(index) {
			this.tabCur = index;
			this.resetData();
		},
		resetData() {
			this.type = '';
			this.money = '';
			this.remarks = '';
		},
		openType() {
			if (this.tabCur == 1) {
				this.incomeTypeShow = true;
			} else {
				this.typeShow = true;
			}
		},
		confirmType(item) {
			this.type = item[0].value;
		},
		dateChange(e) {
			this.date = e.detail.value;
		},
		// 按键被点击(点击退格键不会触发此事件)
		valChange(val) {
			// 最多小数点后两位
			if (this.money && this.money.split('.').length == 2 && this.money.split('.')[1].length === 2) {
				this.$utils.showToast('金额最多小数点后两位！');
				return;
			}

			// 将每次按键的值拼接到value变量中
			this.money = this.money + val;
		},
		// 退格键被点击
		backspace() {
			// 删除value的最后一个字符
			if (this.money.length) {
				this.money = this.money.substr(0, this.money.length - 1);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.bookkeeping {
	.header {
		background-color: #fff;
		padding: 0 50rpx;
	}

	.content {
		background-color: #fff;
	}

	.botBtn {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 400rpx;
	}
}
</style>
